<template>
	<view class="question-detail">

		<view class="top-background">

		</view>

		<view class="back-arrow" :style="{'padding-top': paddingTop}">
			<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#FFFFFF">
			</uni-icons>
			<view style="display: flex;flex-direction: row;">
				<uni-icons style="margin-right: 30rpx;" v-if="question.isMine" @click="toEditQuestion" type="compose"
					size="30" color="#FFFFFF">
				</uni-icons>
				<!-- 				<uni-icons style="margin-right: 30rpx;" @click="toCollect" type="star" size="30" color="#FFFFFF">
				</uni-icons> -->
				<uni-icons style="margin-right: 30rpx;" @click="toShareQuestion" type="more-filled" size="30"
					color="#FFFFFF">
				</uni-icons>
			</view>
		</view>
		<view class="question-info">
			<view style="display: flex; flex-direction: column;width: 690rpx;margin-left: 30rpx;">
				<view
					style="font-size: 120%; color: #ffffff; font-weight: bold; margin-top: 20rpx; margin-bottom: 10rpx">
					{{ question.title }}
				</view>
				<rich-text :nodes="question.context" :class="{'limit-line' : isOut && isNotShow}"
					style="line-height: 50rpx;font-size: 100%; margin-top: 10rpx;color: #eeeeee;">
				</rich-text>
				<text v-if="isOut && isNotShow" @click="showAll" class="option-text">展开</text>
				<text v-if="isOut && !isNotShow" @click="showAll" class="option-text">收起</text>
			</view>
			<view class="counts-follow">
				<view class="counts">


					<view class="item">

						<view class="item-bottom">
							关注数
						</view>
						<view class="item-top">
							{{question.followerCount}}
						</view>
					</view>
					<view class="split-line"></view>
					<view class="item">

						<view class="item-bottom">
							观点数
						</view>
						<view class="item-top">
							{{question.pointCount}}
						</view>
					</view>
					<view class="split-line"></view>
					<view class="item">

						<view class="item-bottom">
							回答数
						</view>
						<view class="item-top">
							{{question.answerCount}}
						</view>
					</view>
				</view>
				<view @click="changeFollowStatus" v-if="question.isFollowed" class="follow">-取消关注</view>
				<view @click="changeFollowStatus" v-else class="follow">+关注问题</view>
			</view>
		</view>

		<view class="points">

			<view style="margin: 30rpx 40rpx 30rpx 40rpx;margin-bottom: 40rpx;">
				<userInfoCard :userInfo="question.userInfo"></userInfoCard>
			</view>

			<view class="point-list" v-if="points == null || points.length == 0">
				<view class="card point">
					<view class="sort">
						<view v-for="(item,index) in sortTypes">
							<view @click="changeSortType(index)" class="type-item"
								:class="index == currentSortTypeIndex ? 'type-item-current': '' ">
								{{sortTypes[index].text}}
							</view>
						</view>
					</view>
					<view
						style="width: 100%;height: 100rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						暂无更多内容
					</view>
				</view>
			</view>



			<view class="point-list" v-for="(item, index) in points" :key="index">

				<view class="card point">

					<view v-if="index == 0" class="sort">
						<view v-for="(item,index) in sortTypes">
							<view @click="changeSortType(index)" class="type-item"
								:class="index == currentSortTypeIndex ? 'type-item-current': '' ">
								{{sortTypes[index].text}}
							</view>
						</view>
					</view>


					<view class="point-top">
						<view class="user-info">
							<image mode="aspectFill" style="width: 60rpx;height:60rpx;border-radius: 50%;"
								:src="item.avatar"></image>
							<view style="margin-left: 20rpx;">{{item.nickname}}</view>
						</view>
						<view @click="firePoint(item.id)"
							:style="'width: 80rpx;height: 40rpx;border-radius: 10rpx;background-color: ' + mindDeepColor(item.fire) + ';'">
						</view>
					</view>
					<view class="point-content" @tap="toAnswer(item.id)">
						{{ item.keyword }}
					</view>
					<view class="point-bottom">
						<view>回答数：{{item.answerCount}}</view>
						<view>发布于：{{item.gmtCreate | gmtToDate}}</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="questionDetail" type="center">
			<view class="modal-box">
				<view
					style="font-size: 120%; color: #2c2c2c; font-weight: bold; margin-top: 20rpx; margin-bottom: 10rpx">
					{{ question.title }}
				</view>
				<rich-text :nodes="question.context" :class="{'limit-line' : isOut && isNotShow}"
					style="line-height: 50rpx;font-size: 100%; margin-top: 10rpx;color: #2c2c2c;">
				</rich-text>
			</view>
		</uni-popup>






		<view class="comment-input" :style="{ 'margin-bottom' : isFocus ? '30rpx' : '0' }">
			<view class="tag-area" @click="toAddPoint()">
				<view class="tag"></view>
				<view class="tag-text">观点</view>
			</view>
			<view class="content" :style="{ height:inputMind.lineCount*40+'rpx' }">
				<textarea class="content-textarea" v-model="inputMind.content" placeholder="输出你的思考"
					@linechange="lineChange" :show-confirm-bar="false"
					:style="{ height:inputMind.lineCount*40+'rpx' }" />
			</view>
			<view class="input-button" @click="createMind()">生成</view>
		</view>
	</view>
</template>

<script>
	import http from '@/common/service/service.js';
	import userInfoCard from '@/components/user-info-card.vue'
	export default {
		components: {
			userInfoCard
		},
		data() {
			return {
				inputMind: {
					isPoint: false,
					lineCount: 1,
					content: ""
				},
				isFocus: false,
				sortTypes: [{
						text: "默认",
						value: "DEFAULT"
					},
					{
						text: "最新",
						value: "NEW"
					}, {
						text: "薪火",
						value: "FIRE"
					}, {
						text: "我的",
						value: "ME"
					},
					// {
					// 	text: "超脱",
					// 	value: "DEVELOP"
					// }
				],

				question: {},
				points: [],

				currentSortTypeIndex: 0,
				isNotShow: true,
				isOut: true,
				keyHei: 0,


				paddingTop: null
			};
		},
		onLoad(options) {
			this.question.id = options.questionId
			this.getQuestionInfo()
			this.listPoints()
			uni.onKeyboardHeightChange((res) => {
				this.keyHei = res.height
			})

			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		onShow() {
			this.getQuestionInfo()
			this.listPoints()
			this.inputMind = {
				isPoint: false,
				content: ""
			}
		},
		methods: {
			listPoints() {
				this.$api.listPoints({
					questionId: this.question.id,
					sortBy: this.sortTypes[this.currentSortTypeIndex].value
				}).then(res => {
					console.log(res);
					this.points = res.data
				})
			},
			getQuestionInfo() {
				this.$api.getQuestionInfo({
					id: this.question.id
				}).then(res => {
					console.log(res);
					this.question = res.data
				})
			},






			changeSortType(index) {
				this.currentSortTypeIndex = index
				this.listPoints()
			},
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},










			mindDeepColor(fire) {
				if (fire <= 0) {
					return '#B3DFDE'
				} else if (fire <= 10) {
					return '#5DACB1'
				} else if (fire <= 50) {
					return '#277D85'
				} else {
					return '#20686f'
				}
			},

			firePoint(pointId) {
				this.$api.firePoint({
					id: pointId,
					fire: 2
				}).then(res => {
					this.listPoints()
				})
			},

			lineChange(e) {
				this.inputMind.lineCount = e.detail.lineCount
				this.$forceUpdate()
			},

			toAddPoint() {
				uni.navigateTo({
					url: "/pages_modex/question/point-add?questionId=" + this.question.id + "&content=" + this
						.inputMind.content
				})
			},

			createMind() {
				this.$api.createMind({
					content: this.inputMind.content
				}).then(res => {
					uni.showToast({
						icon: 'success'
					})
					this.inputMind.content = ""
				})
			},

			// 描述的收起和展开
			showAll() {
				this.$refs.questionDetail.open('center')
			},

			changeFollowStatus() {
				this.$api.changeFollowStatus({
					id: this.question.id
				}).then(() => {
					this.getQuestionInfo()
				})
			},

			toAnswer(pointId) {
				uni.navigateTo({
					url: '/pages_modex/question/answer?pointId=' + pointId + '&questionId=' + this.question.id
				});
			},

			toEditQuestion() {
				uni.navigateTo({
					url: "/pages_modex/question/question-add?questionId=" + this.question.id
				})
			},
		},
		watch: {
			keyHei(val) {
				console.log('keyHei change!', val)
				if (val) {
					this.isFocus = true
				} else {
					this.isFocus = false
				}
			},
		},
		onShareAppMessage: function() {
			var shareObj = {
				title: this.question.title,
				path: '/pages/questionDetail/questionDetail?id=' + this.question.id
			};
			return shareObj;
		},
		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			}
		},
	};
</script>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.top-background {
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 600rpx;
		background: linear-gradient(#1E5D72, #5DACB1, #a7cfce);
	}

	.back-arrow {
		width: 100%;
		//#ifdef MP-WEIXIN
		width: 550rpx;
		//#endif

		padding-top: 100rpx;

		// #ifdef H5
		padding-top: 40rpx;
		// #endif

		height: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index: 3;
		position: relative;
	}

	.question-info {
		z-index: 2;
		position: relative;

		.limit-line {
			/*超过范围进行隐藏不显示*/
			overflow: hidden;
			/*文本溢出, 使用省略号 */
			text-overflow: ellipsis;
			/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
			display: -webkit-box;
			/*限制块容器显示的文本行数, 按照你的需求设置*/
			-webkit-line-clamp: 3;
			/*盒子的方向, 垂直、水平等*/
			-webkit-box-orient: vertical;
			/*文字换行, 可以在单词内断*/
			word-wrap: break-word;
		}

		.option-text {
			position: relative;
			left: 630rpx;
			bottom: 40rpx;
			z-index: 5;
			color: #ffffff;
			// box-shadow: 0px 0px 30rpx 10rpx #ffffff;
			// background-color: rgb(255, 255, 255)
		}

		.counts-follow {
			width: 690rpx;
			margin-left: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;

			.counts {
				display: flex;
				flex-direction: row;
				font-size: 26rpx;
				color: #eeeeee;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 150rpx;
					height: 80rpx;

					.item-top {
						font-size: 32rpx;
						color: #eeeeee;
					}

					.item-bottom {
						font-size: 28rpx;
						color: #eeeeee;
					}
				}

				.split-line {
					width: 3rpx;
					height: 60rpx;
					background-color: #d1d1d1;
				}
			}

			.follow {
				background-color: #DAEFEE;
				// box-shadow: 0px 0px 5rpx 3rpx #eeeeee;
				color: #144C5D;
				padding: 10rpx 30rpx;
				border-radius: 40rpx;
			}
		}
	}

	.points {
		position: relative;
		z-index: 2;
		width: 100%;
		border-radius: 25rpx 25rpx 0 0;
		padding-top: 20rpx;
		padding-bottom: 160rpx;
		background-color: #FFFFFF;
		min-height: 60vh;


		.sort {
			margin-top: 20rpx;
			width: 690rpx;

			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			height: 60rpx;
			align-items: center;
			padding-bottom: 8rpx;
			border-bottom: solid thin #e3e3e3;


			.type-item {
				margin-left: 30rpx;
				margin-right: 20rpx;
				color: gray;
				font-size: 32rpx;
			}

			.type-item-current {
				color: #41868C;
				border-bottom: solid 5rpx #41868C;
				font-weight: bold;
				padding-top: 13rpx;
				padding-bottom: 13rpx;
			}
		}

		.point-list {
			margin-top: 30rpx;
			width: 690rpx;
			margin-left: 30rpx;


			.point {
				display: flex;
				flex-direction: column;
				margin-top: 30rpx;

				.point-top {
					padding-top: 30rpx;
					margin-left: 30rpx;
					margin-right: 30rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.user-info {
						display: flex;
						flex-direction: row;
						align-items: center;
					}

				}

				.point-content {
					margin-left: 30rpx;
					margin-top: 20rpx;
				}

				.point-bottom {
					margin: 20rpx 30rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					color: gray;
					font-size: 24rpx;
				}
			}
		}
	}





	.card {
		background-color: white;
		box-shadow: 0px 0px 15px 5px #f0f1f0;
		border-radius: 10rpx;
		min-height: 50rpx;
	}

	.modal-box {
		width: 600rpx;
		max-height: 800rpx;
		overflow-y: scroll;


		padding: 40rpx;
		border-radius: 20rpx;
		background: white;

		display: flex;
		flex-direction: column;

		text-align: left;
	}

	.comment-input {
		width: 750rpx;
		position: fixed;
		z-index: 2;
		bottom: 0;
		
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-end;
		padding: 30rpx 0;

		background-color: #ffffff;
		border-top: 1px solid #d5d5d5;

		.tag-area {

			width: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;


			.tag {
				height: 35rpx;
				width: 35rpx;
				border: solid thin gray;
				border-radius: 10rpx;
				margin-bottom: 5rpx;

			}
			
			.tag-text{
				font-size: 20rpx;
			}

		}

		.content {
			width: 500rpx;
			max-height: 420rpx;
			padding: 20rpx;
			
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			
			
			border: 1rpx solid #d5d5d5;
			border-radius: 10rpx;

			.content-textarea {
				width: 100%;
				margin-bottom: 10rpx;
				margin-top: 10rpx;
				max-height: 400rpx;
				overflow: scroll;
			}
		}

		.input-button {
			width: 70rpx;
			margin-bottom: 20rpx;
			color: gray;
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
